<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8" />
    <title>订单管理-订单管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../superui/content/ui/global/bootstrap/css/bootstrap.min.css"
          th:href="@{/superui/content/ui/global/bootstrap/css/bootstrap.min.css}"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../superui/content/ui/global/font-awesome/css/font-awesome.css"
          th:href="@{/superui/content/ui/global/font-awesome/css/font-awesome.css}"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="../superui/content/adminlte/dist/css/AdminLTE.css"
          th:href="@{/superui/content/adminlte/dist/css/AdminLTE.css}"/>
    <link rel="stylesheet" href="../superui/content/adminlte/dist/css/skins/_all-skins.min.css"
          th:href="@{/superui/content/adminlte/dist/css/skins/_all-skins.min.css}"/>
    <link rel="stylesheet" href="../superui/content/min/css/supershopui.common.min.css"
          th:href="@{/superui/content/min/css/supershopui.common.min.css}"/>
    <link rel="stylesheet" href="../superui/content/plugins/bootstrap-table/bootstrap-table.css"
          th:href="@{/superui/content/plugins/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" href="../css/global.css"
          th:href="@{/css/global.css}"/>
    <!--全局通用框架样式 end-->
    <!-- iCheck -->
    <link rel="stylesheet" href="../superui/content/plugins/iCheck/square/blue.css"
          th:href="@{/superui/content/plugins/iCheck/square/blue.css}"/>

    <link rel="stylesheet" href="../../js/assets/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
          th:href="@{/js/assets/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}">
    <style>
        .order-box .item{
            border-bottom: 1px solid #cccccc;
            padding-bottom: 10px;
            margin: 30px 0;
        }
        .order-box .item:last-child{
            border-bottom: none;
        }
        .order-box .item .course-img{
            width: 100%;
        }
        .order-box .item .title{
            /*font-size: 16px;*/
        }

        .order-box .item .hd{
            /*line-height: 47px;*/
        }
        .order-box .item .bd{
            font-size: 12px;
            margin: 5px 0 0 0;
        }

        .order-box .item .bd .col-md-4{
            margin-bottom: 6px;
        }
        .ft-opt a{
            margin-left: 5px;
        }
        .price{    color: #F46344;}
        .btn-opt i{
            margin-right: 5px;
        }
    </style>
</head>
<body>
<section class="content-header">
    <h1>
        订单列表
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">订单管理</a></li>
        <li class="active">订单列表</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">

    <div class="row">
        <!-- BEGIN SAMPLE TABLE PORTLET-->
        <div class="col-md-12">
            <!-- BEGIN SAMPLE TABLE PORTLET-->
            <div class="box-body">
                <div class="panel panel-default no-margin">
                    <div class="panel-body search-box">
                        <form id="formSearch" class="form-horizontal">

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_orderNum" class="col-sm-4 control-label">订单编号：</label>
                                <div class="col-sm-8">
                                    <input id="txt_search_orderNum" name="orderNum" class="form-control" type="text" value="" placeholder="请输入订单编号">
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_orderState" class="col-sm-4 control-label">订单状态：</label>
                                <div class="col-sm-8">
                                    <select id="txt_search_orderState" name="orderState" class="form-control">
                                        <option value="-1">全部</option>
                                        <option value="1">未支付</option>
                                        <option value="2">已支付</option>
                                        <option value="4">已取消</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_studentName" class="col-sm-4 control-label">学员姓名：</label>
                                <div class="col-sm-8">
                                    <input id="txt_search_studentName" name="studentName" class="form-control" type="text" value="" placeholder="请输入学员姓名">
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_studentPhone" class="col-sm-4 control-label">学员手机号：</label>
                                <div class="col-sm-8">
                                    <input id="txt_search_studentPhone" name="studentPhone" class="form-control" type="text" value="" placeholder="请输入学员手机号">
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_startDate" class="col-sm-4 control-label">开始时间：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control form_date_start" id="txt_search_startDate" name="startDate"
                                           placeholder="请选择下单开始时间"/>
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_endDate" class="col-sm-4 control-label">结束时间：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control form_date_end" id="txt_search_endDate" name="endDate"
                                           placeholder="请选择下单结束时间"/>
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_payType" class="col-sm-4 control-label">支付方式：</label>
                                <div class="col-sm-8">
                                    <select id="txt_search_payType" name="payType" class="form-control">
                                        <option value="-1">全部</option>
                                        <option value="2">微信支付</option>
                                        <option value="1">现金支付</option>
                                        <option value="3">公司转账</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px; margin-right: 10px">
                                <label class="col-sm-4 control-label"></label>
                                <div class="col-sm-8">
                                    <button type="button" class="btn btn-default" id="btn-search" onclick="clickSearch()">
                                        <i class="fa  fa-search"></i>
                                        查询
                                    </button> &nbsp;&nbsp;&nbsp;
                                    <button type="button" class="btn btn-default" id="resetVal" onclick="resetSearchVal()">
                                        <i class="fa  fa-repeat"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!--订单tab选项卡头-->
                <div class="nav-tabs-custom" style="margin-bottom: auto; margin-top: 15px;">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">全部订单</a></li>
                        <li class=""><a href="#tab_1" data-toggle="tab">今日订单</a></li>
                        <li class=""><a href="#tab_1" data-toggle="tab">未付款</a></li>
                        <li class=""><a href="#tab_1" data-toggle="tab">已付款</a></li>
                    </ul>
                </div>
                <!--订单列表-->
                <div class="table-scrollable">
                    <table class="table-striped table-hover" id="oderTable">

                    </table>
                </div>
            </div>

            <!-- END SAMPLE TABLE PORTLET-->
            <div id="orderDialog" class="hide">
                <div class="info row" style="width: 99%;">
                    <div class="order-info col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                订单信息
                            </div>
                            <div class="panel-body form-horizontal">
                                <form class="form-inline" role="form">
                                    <div class="form-group" style="width: 350px; margin-right: 10px">
                                        <label class="col-sm-4 control-label">订单编号：</label>
                                        <div class="col-sm-8">
                                            <p class="form-control-static" id="orderNum" name="orderNum" />
                                        </div>
                                    </div>
                                    <div class="form-group" style="width: 350px; margin-right: 10px">
                                        <label class="col-sm-4 control-label">下单时间：</label>
                                        <div class="col-sm-8">
                                            <p class="form-control-static" id="orderDate" name="orderDate"></p>
                                        </div>
                                    </div>
                                </form>

                                <form class="form-inline" role="form">
                                <div class="form-group" style="width: 350px; margin-right: 10px">
                                    <label class="col-sm-4 control-label">订单状态：</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" id="orderState" name="orderState"></p>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>

                    </div>

                    <div class="student-info col-md-6">
                        <div class="panel panel-default no-margin">
                            <div class="panel-heading">
                                学员信息
                            </div>
                            <div class="panel-body form-horizontal">
                            <form class="form-inline" role="form">
                                <div class="form-group" style="width: 350px; margin-right: 10px">
                                    <label class="col-sm-4 control-label">学员姓名：</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" id="userName" name="userName"></p>
                                    </div>
                                </div>
                            </form>
                            <form class="form-inline" role="form">
                                <div class="form-group" style="width: 350px; margin-right: 10px">
                                    <label class="col-sm-4 control-label">联系号码：</label>
                                    <div class="col-sm-8">
                                        <p class="form-control-static" id="phone" name="phone"></p>
                                    </div>
                                </div>
                            </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default" style="margin-top: 10px;width: 99%">
                    <div class="panel-heading">
                        课程列表
                    </div>
                    <div class="box-body" style="max-height: 300px;overflow-y: auto;">
                        <table id="dt-inspection-content" class="table table-bordered table-striped table-hover corse-table">
                            <thead>
                            <tr style="text-align: center;">
                                <th>序号</th>
                                <th>课程名称</th>
                                <th>课程单价</th>
                                <th>课程总课次</th>
                                <th>现有课次</th>
                                <th>课程总价</th>
                                <th>活动减免</th>
                                <th>实际总价</th>
                                <th>开课时间</th>
                                <th>预计上课日期</th>
                                <th>转出课次</th>
                                <th>转班标识</th>
                                <th>退款标识</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="courseTableBody">

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="fr" style="margin-right: 40px;width: 300px;">
                    <p>订单总价：<span style="_position:relative; " class="fr" id="orderAmount" name="orderAmount"></span></p>
                    <p>优惠券减免：<span style="_position:relative; " class="fr" id="discountAmount" name="discountAmount"></span><em
                            style="_position:relative;" class="fr">-</em></p>
                    <!--<p>活动减免：<span style="_position:relative; " class="fr" id="totalDiscountPrice" name="totalDiscountPrice"></span></p>-->
                </div>
                <div class="fr"  style="border-bottom: 1px solid #b5bbc8;width: 500px;clear: both;">

                </div>
                <!--实际付款-->
                <div class="fr" style="margin-right: 40px; clear: both;width: 300px;margin-top: 10px; " id="actualAmount">
                    <p style="display: inline" class="title">实际付款<span style="_position:relative; " class="fr"  name="actualAmount" id="_aucture"></span></p>
                </div>
                <!--退款金额-->
                <div class="fr" style="margin-right: 40px; clear: both;width: 300px;margin-top: 10px; " id="refundsAmount">
                    <p style="display: inline" class="title">退款金额<span style="_position:relative; " class="fr"  name="refundsAmount"></span><em
                            style="_position:relative;" class="fr">-</em></p>
                </div>

                <!--订单金额-->
                <div class="fr" style="margin-right: 40px; clear: both;width: 300px;margin-top: 10px; " id="orderAmout">
                    <p style="display: inline" class="title">订单金额<span style="_position:relative; " class="fr"  name="orderAmout" id="_orderture"></span></p>
                </div>
                <!--现金支付-->
                <div class="fr" style="margin-right: 40px; clear: both;width: 300px;margin-top: 10px; " id="payAmont">
                    <span style="_position:relative; " class="fr"></span>
                    <button id ="payCrash" style="float:right; _position:relative;" class="title__date btn btn-primary" >现金支付</button>
                    <button id="payCompany" style="float:right; _position:relative; margin-right: 10px " class="title__date btn btn-primary" >公司转账</button>
                </div>
                </div>
            </div><!-- /.modal -->

        <div id="changeCourseDialog" class="hide">
            <div class="box-body">
                <div class="panel panel-default no-margin">
                    <div class="panel-body search-box">
                        <form id="formSearchCourse" class="form-horizontal">
                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_courseName" class="col-sm-4 control-label">课程名称：</label>
                                <div class="col-sm-8">
                                    <input id="txt_search_courseName" name="courseName" class="form-control" type="text" value=""
                                           placeholder="请输入课程名称">
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px;margin-right: 10px">
                                <label for="txt_search_courseSeason" class="col-sm-4 control-label">课程季：</label>
                                <div class="col-sm-8">
                                    <select id="txt_search_courseSeason" name="courseSeason" class="form-control">
                                        <option value="">全部</option>
                                        <option value="spring">春季班</option>
                                        <option value="summer">暑假班</option>
                                        <option value="autumn">秋季班</option>
                                        <option value="winter">寒假班</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group fl" style="width: 350px; margin-right: 10px">
                                <label class="col-sm-4 control-label"></label>
                                <div class="col-sm-8">
                                    <button type="button" class="btn btn-default" onclick="ChangeCourseDlg.clickSearch()">
                                        <i class="fa  fa-search"></i>
                                        查询
                                    </button> &nbsp;&nbsp;&nbsp;
                                    <button type="button" class="btn btn-default" onclick="ChangeCourseDlg.resetSearchVal()">
                                        <i class="fa  fa-repeat"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!--课程列表-->
                <div class="table-scrollable">
                    <table class="table-striped table-hover" id="newCourseTable">

                    </table>
                </div>
            </div>
        </div>

        <div id="reduceAmountDlg" class="hide">
            <div class="box-body">
                <form id="reduceAmountForm" class="col-sm-10 form-horizontal">
                    <input hidden name="orderNum" id="val_orderNum">
                    <input hidden name="orderItemId" id="val_orderItemId">
                    <div class="form-group">
                        <label for="txt_search_courseName" class="col-sm-4 control-label">课程名称：</label>
                        <div class="col-sm-8">
                            <input readonly id="courseName" name="courseName" class="form-control" type="text" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="courseAmount" class="col-sm-4 control-label">实际总价：</label>
                        <div class="col-sm-8">
                            <input readonly id="courseAmount" name="courseAmount" class="form-control" type="text" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="reduceAmount" class="col-sm-4 control-label">优惠金额：</label>
                        <div class="input-group col-sm-8">
                            <span class="input-group-addon">￥</span>
                            <input id="reduceAmount" name="reduceAmount" class="form-control" type="number" value=""
                                   placeholder="请输入调整金额">
                            <span class="input-group-addon">元</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.3 -->
<script src="../../superui/content/ui/global/jQuery/jquery.min.js"
        th:src="@{/superui/content/ui/global/jQuery/jquery.min.js}"></script>
<!-- Bootstrap 3.3.6 -->

<script src="../../superui/content/ui/global/bootstrap/js/bootstrap.min.js"
        th:src="@{/superui/content/ui/global/bootstrap/js/bootstrap.min.js}"></script>
<!--supershopui-->
<script src="../../superui/content/min/js/supershopui.common.js"
        th:src="@{/superui/content/min/js/supershopui.common.js}"></script>

<!--bootstrap-table-->
<script src="../../superui/content/plugins/bootstrap-table/bootstrap-table.js"
        th:src="@{/superui/content/plugins/bootstrap-table/bootstrap-table.js}"></script>
<script src="../../superui/content/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"
        th:src="@{/superui/content/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script src="../../js/assets/common/bootstrap-table-object.js"
        th:src="@{/js/assets/common/bootstrap-table-object.js}"></script>
<!-- iCheck -->
<script src="../../superui/content/plugins/iCheck/icheck.min.js"
        th:src="@{/superui/content/plugins/iCheck/icheck.min.js}"></script>
<script src="../../js/assets/common/Feng.js"
        th:src="@{/js/assets/common/Feng.js}"></script>

<script src="../../js/assets/lib/numeral/numeral.min.js"
        th:src="@{/js/assets/lib/numeral/numeral.min.js}"></script>

<!--bootsrtap日历控件脚本-->
<script src="../../js/assets/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"
        th:src="@{/js/assets/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
<script src="../../js/assets/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        th:src="@{/js/assets/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
<script src="../../js/assets/lib/bootstrap-datetimepicker/js/initDatetimepicker.js"
        th:src="@{/js/assets/lib/bootstrap-datetimepicker/js/initDatetimepicker.js}"></script>

<!-- 模板引擎-->
<script src="../../js/assets/lib/artTemplate/template.js"
        th:src="@{/js/assets/lib/artTemplate/template.js}"></script>
<!-- 请求脚本-->
<script src="../../js/assets/common/ajax-util.js"
        th:src="@{/js/assets/common/ajax-util.js}"></script>
<!-- 公用脚本-->
<script src="../../js/assets/common/common.js"
        th:src="@{/js/assets/common/common.js}"></script>
<!-- 订单脚本-->
<script src="./../js/order/orderlist/list.js"
        th:src="@{/js/order/orderlist/list.js}"></script>
<script src="./../js/order/orderlist/info.js"
        th:src="@{/js/order/orderlist/info.js}"></script>
<script src="./../js/order/orderlist/change-course.js"
        th:src="@{/js/order/orderlist/change-course.js}"></script>
<script src="./../js/order/orderlist/reduce-amount.js"
        th:src="@{/js/order/orderlist/reduce-amount.js}"></script>
<!-- 课程表格模板 -->
<script type="text/html" id="dataCourseContentTmpl">
    {{each}}
    <tr>
        <td>{{$index+1}}</td>
        <td>{{$value.course.courseName||"无"}}</td>
        <td>{{$value.coursePrice}}</td>
        <td>{{$value.courseTotalNumber}}</td>
        <td>{{$value.purchaseTimes}}</td>
        <td>{{$value.course.totalPrice}}</td>
        <td id="_promotionAmount{{$index}}">{{$value.promotionAmount||"无"}}</td>
        <td id="_courseAmount{{$index}}">{{$value.courseAmount}}</td>
        <td>{{$value.course.courseStartDate}}</td>
        <td>{{$value.expectedCourseTime}}</td>
        <td>{{$value.changeCourseNumber}}</td>
        <td>{{$value.itemStatus}}</td>
        <td>{{$value.refundStatus}}</td>
        <td data-id="{{$value.id}}">
            {{if $value.orderState === "1"}}
            <a class="btn btn-primary btn-xs" title="优惠" onclick="OrderInfoDlg.reducePromotionAmountDlg('{{$value.orderNum}}','{{$value.id}}','{{$value.course.courseName}}','{{$value.courseAmount}}','{{$index}}')"
               data-target="reducedPrice"><i
                    class="glyphicon glyphicon-heart-empty"></i>优惠</a>
            {{/if}}
            {{if $value.orderState === "2" && ($value.itemStatus === "未转" || $value.itemStatus === "新转入")&& $value.refundStatus === "正常" }}
            <a class="btn btn-primary btn-xs" title="转课" onclick="OrderInfoDlg.changeCourseDlg('{{$value.id}}','{{$value.userId}}')"
               data-target="changeCourse"><i
                    class="glyphicon glyphicon-heart-empty"></i>转课</a>
            {{/if}}
        </td>
    </tr>
    {{/each}}
</script>
</body>
</html>